<template>
  <div>
    <div id="main"></div>
  </div>
</template>

<script>
var echarts = require("echarts");
// require('echarts/lib/chart/bar');
// require('echarts/lib/component/tooltip');
// require('echarts/lib/component/toolbox');
// require('echarts/lib/component/legend');
// require('echarts/lib/component/markLine');
export default {
  name: "",
  data() {
    return {
      //   option: {
      //     title: {
      //       text: "走势图"
      //     },
      //     tooltip: {
      //       trigger: "axis"
      //     },
      //     legend: {
      //       data: ["注册新用户", "新增订单", "新增管理员"]
      //     },
      //     toolbox: {
      //       show: true,
      //       feature: {
      //         dataZoom: {
      //           yAxisIndex: "none"
      //         },
      //         dataView: { readOnly: false },
      //         magicType: { type: ["line", "bar"] },
      //         restore: {},
      //         saveAsImage: {}
      //       }
      //     },
      //     xAxis: {
      //       type: "category",
      //       boundaryGap: false,
      //       data: [
      //         "2020-08-05",
      //         "2020-08-06",
      //         "2020-08-07",
      //         "2020-08-08",
      //         "2020-08-09",
      //         "2020-08-10",
      //         "2020-08-11"
      //       ]
      //     },
      //     yAxis: {
      //       type: "value",
      //       axisLabel: {}
      //     },
      //     series: [
      //       {
      //         name: "新注册用户",
      //         type: "line",
      //         data: [0, 11, 15, 13, 12, 13, 10],
      //         markPoint: {
      //           data: [
      //             { type: "max", name: "最大值" },
      //             { type: "min", name: "最小值" }
      //           ]
      //         },
      //         markLine: {
      //           data: [{ type: "avarage", name: "平均值" }]
      //         }
      //       },
      //       {
      //         name: "新增订单",
      //         type: "line",
      //         data: [10, 30, 50, 35, 40, 30, 50],
      //         markPoint: {
      //           data: [
      //             { type: "max", name: "最大值" },
      //             { type: "min", name: "最小值" }
      //           ]
      //         },
      //         markLine: {
      //           data: [{ type: "avarage", name: "平均值" }]
      //         }
      //       },
      //       {
      //         name: "新增管理员",
      //         type: "line",
      //         data: [0, 10, 15, 11, 13, 50, 30],
      //         markPoint: {
      //           data: [
      //             { type: "max", name: "最大值" },
      //             { type: "min", name: "最小值" }
      //           ]
      //         },
      //         markLine: {
      //           data: [{ type: "avarage", name: "平均值" }]
      //         }
      //       }
      //     ],
      //     toolbox: {
      //       feature: {
      //         dataView: {
      //           show: true,
      //           readOnly: false
      //         },
      //         magicType: {
      //           show: true,
      //           type: ["line", "bar"]
      //         },
      //         restore: {
      //           show: true
      //         },
      //         saveAsImage: {
      //           show: true
      //         }
      //       }
      //     }
      //   }
    };
  },
  props: [],
  components: {},
  mounted() {
    var myChart = echarts.init(document.getElementById("main"));
    myChart.setOption({
      title: {
        text: "走势图",
      },
      tooltip: {
        trigger: "axis"
      },
      legend: {
        data: ["注册新用户", "新增订单","新增管理员"]
      },
      toolbox: {
        show: true,
        feature: {
          dataZoom: {
            yAxisIndex: "none"
          },
          dataView: { readOnly: false },
          magicType: { type: ["line", "bar"] },
          restore: {},
          saveAsImage: {}
        }
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["2020-08-05",
              "2020-08-06",
              "2020-08-07",
              "2020-08-08",
              "2020-08-09",
              "2020-08-10",
              "2020-08-11"
        ]
      },
      yAxis: {
        type: "value",
        axisLabel: {
          formatter: "{value} "
        }
      },
      series: [
        {
          name: "注册新用户",
          type: "line",
          data: [0, 11, 15, 13, 12, 13, 10],
          markPoint: {
            data: [
              { type: "max", name: "最大值" },
              { type: "min", name: "最小值" }
            ]
          },
          markLine: {
            data: [{ type: "average", name: "平均值" }]
          }
        },

        {
          name: "新增订单",
          type:"line",
          data: [10, 30, 50, 35, 40, 30, 50],
          markPoint: {
            data: [
              { type: "max", name: "最大值" },
              { type: "min", name: "最小值" }
            ]
          },
          markLine: {
            data: [{ type: "average", name: "平均值" }]
          }
        },
        {
          name: "新增管理员",
          type: "line",
         data: [0, 10, 15, 11, 13, 50, 30],
          markPoint: {
            data: [
              { type: "max", name: "最大值" },
              { type: "min", name: "最小值" }
            ]
          },
          markLine: {
            data: [{ type: "average", name: "平均值" }]
          }
        }
      ]
    });
  },
  methods: {}
};
</script>

<style scoped>
#main {
  width: 95%;
  height: 500px;
  margin:10px auto;
}
</style>